<template>
  <div class="page">
    <div class="top">
		<div class="banner"></div>
	</div>
	<el-row type="flex">
		<el-col class="col-box-card" :xs="22" :sm="24" :md="12">
			<el-card  class="box-card-fk">
				<el-row>
					<el-col class="fk-title">OpenAPP 反馈收集表</el-col>
				</el-row>
				<el-row class="fk-t">
					<el-col>你的想法至关重要</el-col>
				</el-row>
				<el-row class="fk-t">
					<el-col class="fk-t-tt">
						<i class="el-icon">*</i>
							你的超级无敌好或者一般般的建议（我可以，我来做！）
						</el-col>
					<el-col :xs="24" :sm="24" :md="20">
						<el-input v-model="suggest" type="textarea" rows="2" placeholder="请输入内容"></el-input>
					</el-col>
				</el-row>
				<el-row class="fk-t">
					<el-col class="fk-t-tt">
						<i class="el-icon">*</i>听说你发现了了不得的 Bug（辛苦您啦！）</el-col>
					<el-col :xs="24" :sm="24" :md="20">
						<el-input v-model="app_bug" type="textarea" rows="2" placeholder="请输入内容"></el-input>
					</el-col>
				</el-row>
				<el-row class="fk-t">
					<el-col class="fk-t-tt">
						<i class="el-icon">*</i>你的邮箱（有了进展第一时间通知您！）</el-col>
					<el-col :xs="24" :sm="24" :md="20">
						<el-input v-model="email" type="input" placeholder="请输入内容"></el-input>
					</el-col>
				</el-row>
				<el-row class="fk-t">
					<el-col :span="8" :xs="24" :sm="24" :md="20">
					</el-col>
					<el-col :span="8" :xs="24" :sm="24" :md="20">
						  <el-button class="submit-btn" :loading="btnLoading"  type="primary" @click="submit">提交</el-button>
					</el-col>
					<el-col :span="8" :xs="24" :sm="24" :md="20">
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		
		<el-dialog
		  :visible.sync="dialogVisible"
		  width="30%"
		  center
		  :close-on-click-modal="false"
		  :close-on-press-escape="false"
		  :show-close="false"
		  >
		  <span>
				<el-result icon="success" title="反馈成功" subTitle="感谢您的反馈,如果有了进展将会第一时间通知您！">
			        <template slot="extra">
			        </template>
			    </el-result>
		  </span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="toHome">返回首页</el-button>
		  </span>
		</el-dialog>
		
	</el-row>
  </div>
</template>
<script>
	import axios from "axios";
	import Vue from 'vue';
	import {baseUrl} from '../utils/global.js'
    export default {
        name: 'Store',
        data () {
            return {
				suggest: "",
				app_bug: "",
				email: "",
				dialogVisible: false,
				btnLoading : false
            }
        },
		methods: {
			submit(){
				if(this.suggest == ""){
					this.$message.error("建议不能为空");
					return
				}
				if(this.app_bug == ""){
					this.$message.error("Bug描述不能为空");
					return
				}
				if(this.email == "" || this.email.length > 100){
					this.$message.error("邮箱不能为空，且长度小于100");
					return
				} else {
					const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
					if(!mailReg.test(this.email)){
						this.$message.error("邮箱格式不正确");
						return
					}
				}
				this.btnLoading = true
				const data = {
					"suggest": this.suggest,
					"app_bug": this.app_bug,
					"email": this.email
				}
				const config = {
					headers: {
						"Authorization": "bearer " + Vue.$cookies.get('token'),
					}
				};
				axios.post(baseUrl + "/user/feedback", data, config)
					.then((res) => {
						if (res.status == 200) {
							this.dialogVisible = true
							this.suggest = ""
							this.app_bug = ""
						}
						this.btnLoading = false
					})
					.catch((res) => {
						this.$message.error(res.response.data.detail[0].msg);
						this.btnLoading = false
					});
				
			},
			toHome(){
				this.$router.push({path: "/"});
			}
		},
		mounted() {
			if(Vue.$cookies.get('token') != null){
				 this.email = Vue.$cookies.get('username')
			}
		}
    }
</script>

<style scoped>
  @import '../../static/css/Opinions.css'
</style>